<template>
  <!--  查询 -->
  <div>
    <h2>护理等级详情</h2>
    <el-input placeholder="请输入护理名称" style="width:200px" v-model="queryName"></el-input>
    <el-button @click="queryByName" type="success" plain>查询</el-button>
    <el-button @click="showNurselevelitemDialog" type="primary" style="width: 100px; margin-left: 50px;font-weight: bolder; font-size: 16px">
      登&emsp;记
    </el-button>
    <router-link to="/NurseLevel">
      <el-button @click="showNurselevelitemDialog" type="primary" style="width: 100px; margin-left: 500px;font-weight: bolder; font-size: 16px">
        返&emsp;回
      </el-button>
    </router-link>
  </div>
  <!--  显示所有客户信息 table自动循环-->
  <div>{{errorMessage}}</div>
  <el-table :data="nurselevelitemList">
    <el-table-column label="序号" type="index" width="60px"></el-table-column>
    <el-table-column prop="serialNumber" label="编号" width="80px"></el-table-column>
    <el-table-column prop="nursingName" label="护理名称" width="80px"></el-table-column>
    <el-table-column prop="servicePrice" label="服务价格" width="80px"></el-table-column>
    <el-table-column prop="status" label="状态" width="220px"></el-table-column>
    <el-table-column prop="executionCycle" label="执行周期" width="80px"></el-table-column>
    <el-table-column prop="executionTimes" label="执行次数" width="80px"></el-table-column>
    <el-table-column prop="message" label="备注" width="120px"></el-table-column>
    <el-table-column  label="操作">
      <template #default="scope">
        <el-button type="primary" @click="showEditDialog(scope.row.id)">修改</el-button>
        <el-button type="danger" @click="removeOne(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="example-pagination-block">
    <el-pagination background
                   v-model:current-page="pageContains.pageNum"
                   v-model:page-size="pageContains.pageSize"
                   :page-sizes="[10,20,30,50,100]"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="pageContains.total"
                   @size-change="handleSizeChange"
                   @current-change="handlePageChange"
    />
  </div>

  <!--  客户信息对话框 -->
  <el-dialog v-model="nursecontentDialog" :title="dialogTitle">
    <el-form :model="curNursecontent">
      <el-form-item label="编号">
        <el-col :span="11">
          <el-input v-model="curNursecontent.serialNumber"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="护理名称">
        <el-col :span="11">
          <el-input v-model="curNursecontent.nursingName"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="服务价格">
        <el-col :span="11">
          <el-input v-model="curNursecontent.servicePrice"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="状态">
        <el-col :span="11">
          <el-select v-model="curNursecontent.status">
            <el-option
                v-for="item in statusOptions"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="执行周期">
        <el-col :span="11">
          <el-input v-model="curNursecontent.executionCycle"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="执行次数">
        <el-col :span="11">
          <el-input v-model="curNursecontent.executionTimes"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="备注">
        <el-col :span="11">
          <el-input v-model="curNursecontent.message"></el-input>
        </el-col>
      </el-form-item>
    </el-form>
    <el-button @click="optOne()">{{buttonOpt}}</el-button>
  </el-dialog>
</template>

<script setup>
import {ref, onMounted, reactive} from "vue";
import http from '@/axios/http';
import qs from "qs";
import { useRoute } from 'vue-router'

const route = useRoute()


// 存放用户数据集合
let nurselevelitemList = ref([]);



//报错提示
let errorMessage = ref("")

//模糊查询绑定的 客户名称
let queryName = ref("")

//对话框显示控制
let nurselevelitemDialog = ref(false)

//客户信息，或者编辑已有客户的 绑定数据
let curNurselevelitem = ref({});

//登记、修改客户信息弹出框的 标题和操作按钮  显示文字
let dialogTitle = reactive("")
let buttonOpt = reactive("")

//对话框操作类型：1：添加 2：编辑
let dialogOptType = reactive(1)
let size = 10; //当前显示多少行
let pageNum = 1; // 当前页码
let pageSize = 10; //每页显示行数

//当前页码信息
let pageContains = ref({})


let statusOptions = ref([
  {
    label: '1',
    value: 1
  },{
    label: '2',
    value: 2
  }
])



//根据客户姓名模糊查询客户信息
function queryByName(){
  const nurselevelid = Number(route.query.nurselevelid);
  const params = {
    nursingname: queryName.value,
    nurselevelid: nurselevelid
  }



  http.post('/lyy/get_nursecontents_level_by', params, {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then((res) => {
    let result = res.data;
    if(result.result === 'success'){
      nurselevelitemList.value = result.data;
      console.log(nurselevelitemList.value)
    } else {
      errorMessage.value = result.error || "获取数据失败";
    }
  }).catch(err => {
    errorMessage.value = "请求失败：" + err.message;
  });
}

//单击登录按钮事件
function showNurselevelitemDialog(){
  dialogTitle = "录入护理内容";
  buttonOpt="录入"
  //弹出客户信息对话框
  nurselevelitemDialog.value = true;
  dialogOptType = 1 //设置当前操作类型标志是 录入

}

//关闭客户信息对话框
function closeNurselevelitemDialog(){
  nurselevelitemDialog.value = false;
}

//页面初始化
onMounted(
    ()=>{
      init();
    }
)

function getContentsByLevelId(nurselevelid) {
  http.post('/lyy/get_contents_by_levelid', qs.stringify({ nurselevelid }), {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }).then((res) => {
    let result = res.data;
    if(result.result === 'success'){
      // 将单个对象转为数组，或根据实际需求调整
      nurselevelitemList.value = Array.isArray(result.data) ? result.data : [result.data];
      pageContains.value = result.data;
      //pageContains.list = null;
      console.log(nurselevelitemList.value)
    } else {
      errorMessage.value = result.error || "获取数据失败";
    }
  }).catch(err => {
    errorMessage.value = "请求失败：" + err.message;
  });
}

function init(){
  //查询所有用户信息
  const nurselevelid = Number(route.query.nurselevelid);
  if (nurselevelid) {
    getContentsByLevelId(nurselevelid);
  } else {
    getAllNurselevelitems();
  }

  //查询需要的字典（{标志1: 值1, 标志2: 值2}）
  //用的时候取 字典[字段值（字典标志）]
}


function getAllNurselevelitems(){
  // let params = ref({
  //   size: size,
  //   pageNum: pageNum,
  //   pageSize: pageSize
  // })
  //
  const nurselevelid = ref([Number(route.query.nurselevelid)])
  let param = {
    nurselevelid: nurselevelid.value
  }

  http.post('/lyy/get_contents_by_levelid',nurselevelid.value).then(
      (res)=>{
        let result = res.data;
        // 返回结果传给 nurselevelitemList
        if(result.result === 'success'){
          pageContains.value = result.data;
          //pageContains.list = null;
          nurselevelitemList.value = result.data.list;

        } else {
          errorMessage.value = result.error;
        }

      }
  )


  // // eslint-disable-next-line no-undef
  // const props = defineProps({
  //   id: {
  //     type: Number(), // 根据实际类型调整
  //     required: true
  //   }
  // })
  console.log(param)
  console.log(nurselevelid)
  // http.post('/lyy/get_contents_by_levelid', param).then(
  //     (res)=>{
  //       let result = res.data;
  //       // 返回结果传给 nurselevelitemList
  //       if(result.result === 'success'){
  //         nurselevelitemList.value = result.data;
  //       } else {
  //         errorMessage.value = result.error;
  //       }
  //
  //     }
  // )
}


function recordOne(){
  let param = curNurselevelitem.value;
  http.post('/lyy/add_one_nurselevelitem', param).then(
      (res)=>{
        let result = res.data;
        // 返回结果传给 nurselevelitemList
        if(result.result === 'success'){
          //关闭对话框
          closeNurselevelitemDialog()

          //刷新客户列表
          getAllNurselevelitems();
        } else {
          errorMessage.value = result.error;
        }

      }
  )
}


//显示编辑对话框
function showEditDialog(nurselevelitemid){
  //根据id查询客户信息
  getNurselevelitemInfo(nurselevelitemid)

  //显示对话框
  console.log(nurselevelitemid)
  nurselevelitemDialog.value = true;
  dialogTitle = "护理内容修改";
  buttonOpt="修改"

  dialogOptType = 2 //设置当前操作类型标志是 修改

}

function getNurselevelitemInfo(nurselevelitemid){
  let param = {
    nurselevelitemid : nurselevelitemid
  }
  http.post('/lyy/getnurselevelitemby_id', qs.stringify(param)).then(
      (res)=>{
        let result = res.data;
        // 返回结果传给 nurselevelitemList
        if(result.result === 'success'){
          curNurselevelitem.value = result.data;

        } else {
          errorMessage.value = result.error;
        }

      }
  )
}

//删除客户
function removeOne(nurselevelitemid){
  let param = {
    nurselevelitemid : nurselevelitemid
  }
  http.post('/lyy/removenurselevelitem_by_id', qs.stringify(param)).then(
      (res)=>{
        let result = res.data;
        // 返回结果传给 nurselevelitemList
        if(result.result === 'success'){
          getAllNurselevelitems();
        } else {
          errorMessage.value = result.error;
        }

      }
  )
}

function editOne(){
  let param = curNurselevelitem.value;
  http.post('/lyy/modifynursecontentby_id', param).then(
      (res)=>{
        let result = res.data;
        if(result.result === 'success'){
          //curNurselevelitem.value = result.data;
          closeNurselevelitemDialog();
          getAllNurselevelitems();

        } else {
          errorMessage.value = result.error;
        }

      }
  )
}

function optOne(){
  if(dialogOptType === 1){
    recordOne()
  } else if(dialogOptType === 2) {
    editOne()
  }
}

//分页处理
const handlePageChange = (pageNum1)=>{
  pageNum = pageNum1
  getAllNurselevelitems()
}

const handleSizeChange = (pageSize1)=>{
  pageSize = pageSize1
  getAllNurselevelitems()
}
</script>

<style scoped>

</style>